<!-- eslint-disable prettier/prettier -->
<template>
  <div class="container">
    <Breadcrumb :items="['menu.system', '辖区管理']" />
    <div class="content">
      <a-table :columns="columns" :data="data">
        <template #columns>
          <!-- <a-table-column title="序号" data-index="key" /> -->
          <a-table-column title="编号" data-index="keyNum" />
          <a-table-column title="地名" data-index="addressName" />
        </template>
      </a-table>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { reactive } from "vue"
const columns = [
  {
    title: "地名",
    dataIndex: "addressName"
  },
  {
    title: "编号",
    dataIndex: "keyNum"
  }
  // {
  //   title: "排序",
  //   dataIndex: "address"
  // },
  // {
  //   title: "状态",
  //   dataIndex: "status"
  // }
]
const data = reactive([
  {
    key: "1",
    addressName: "上海市",
    keyNum: "310100",
    children: [
      {
        key: "2",
        addressName: "黄浦区",
        keyNum: "310101"
      },
      {
        key: "5",
        addressName: "松江区",
        keyNum: "310102"
      },
      {
        key: "6",
        addressName: "奉贤区",
        keyNum: "310103"
      },
      {
        key: "7",
        addressName: "徐汇区",
        keyNum: "310104"
      },
      {
        key: "8",
        addressName: "静安区",
        keyNum: "310106"
      },
      {
        key: "9",
        addressName: "浦东新区",
        keyNum: "310107"
      }
    ]
  },
  {
    key: "1",
    addressName: "北京市",
    keyNum: "301100"
  }
])

// const loadMore = (record: any, done: any) => {
//   window.setTimeout(() => {
//     done([
//       {
//         key: `${record.key}-1`,
//         addressName: "市场部门",
//         keyNum: "310108"
//       },
//       {
//         key: `${record.key}-2`,
//         addressName: "研发部门",
//         keyNum: "310109"
//       }
//     ])
//   }, 2000)
// }
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.content {
  margin: 20px;
}
</style>
